import React, { useState, useEffect } from 'react';
import './index.less';
import { Link, IndexModelState, ConnectProps, Loading, connect ,history} from 'umi';
import { message, Popconfirm, Button, Modal, Input, notification } from 'antd';

import { Popover, Badge, Space } from 'antd';
type Props = {};
type NotificationType = 'success' | 'info' | 'warning' | 'error';

const openNotificationWithIcon = (type: NotificationType) => {
  notification[type]({
    message: '回复评论失败',
    description: '请前往系统设置完善 SMTP 设置，前往个人中心更新个人邮箱。',
  });
};
const { TextArea } = Input;
const Index = (props: any) => {
  const data: any = JSON.parse(
    window.localStorage.getItem('user') as string
  ).name;
  const [page, setPage] = useState(1);
  const [items,setitems]=useState({} as any)
  const [pageSize, setPageSize] = useState(12);
  const [role, serRole] = useState('管理员');
  const { dispatch, list, comm } = props;
  const [values,setvalues]=useState('')
  useEffect(() => {
    if (data === '12') {
      serRole('管理员');
    } else {
      serRole('访客');
    }
    dispatch({
      type: 'work/getlist',
      payload: { page, pageSize },
    });
    dispatch({
      type: 'work/getcomment',
    });
  }, []);

  const obj={
    id:new Date().getTime().toString(),
    name:data,
    createAt:new Date(),
    content:values,
    email:items.email,
    pass:false,
    html:`<p>${values}</p>`,
    hostId:items.id,
    createByAdmin:true,
    parentCommentId:items.id,
    replyUserEmail:items.replyUserEmail,
    replyUserName:items.replyUserName,
    url:items.url,
    updateAt:items.updateAt,
    userAgent:items.userAgent
  }

  const cancel = (e: any) => {

  };
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className="box">
      <div>
        <b style={{ fontSize: '40px' }}>您好{data}</b>
        <p>您的角色:{role}</p>
        <div className="wordnav">
          <p
            style={{
              fontSize: '20px',
              height: '50px',
              borderBottom: 'solid 1px',
            }}
          >
            快速导航
          </p>
          <div className="usenav">
            <p>
              <Link style={{ color: 'black' }} to={'/pages/Articlemanagement'}>
                文章管理
              </Link>
            </p>
            <p>
              <Link style={{ color: 'black' }} to={'/pages/Comment'}>
                评论管理
              </Link>
            </p>
            <p>
              <Link style={{ color: 'black' }} to={'/pages/File'}>
                文件管理
              </Link>
            </p>
            <p>
              <Link style={{ color: 'black' }} to={'/pages/User'}>
                用户管理
              </Link>
            </p>
            <p>
              <Link style={{ color: 'black' }} to={'/pages/Visit'}>
                访问管理
              </Link>
            </p>
            <p>
              <Link style={{ color: 'black' }} to={'/pages/System'}>
                系统设置
              </Link>
            </p>
          </div>
        </div>
        <div>
          <div
            className="new"
            style={{
              fontSize: '20px',
              height: '50px',
              borderBottom: 'solid 1px',
            }}
          >
            <p style={{ fontSize: '20px' }}>最新文章</p>
            <p></p>
            <p>
              <Link
                style={{ color: 'black' }}
                to={'/pages/Articlemanagement/All'}
              >
                全部文章
              </Link>
            </p>
          </div>
        </div>
        <div className="newword">
          {list.map((item: any, index: number) => {
            return (
              <div key={index} className="samllnew" onClick={()=>{
                console.log(11);

                history.push({
                  pathname:`/work/editor/${item.id}`,
                  state:{
                    data:item
                  }
                })
              }}>
                <img src={item.cover} alt="" />
                <p>{item.title}</p>
              </div>
            );
          })}
        </div>
        <div>
          <div
            className="new"
            style={{
              fontSize: '20px',
              height: '50px',
              borderBottom: 'solid 1px',
            }}
          >
            <p style={{ fontSize: '20px' }}>最新评论</p>
            <p></p>
            <p>
              <Link style={{ color: 'black' }} to={'/pages/Comment'}>
                全部评论
              </Link>
            </p>
          </div>

          {role === '管理员' ? (
            <div>

              <div>
                 {/* //管理员盒子 */}
                {comm.map((item: any, index: number) => {
                  return (
                    <div key={index} className="getcomm" >
                      <p>
                        {item.name}&nbsp;在 &nbsp;
                        <Popover
                          content={
                            <p>
                              <img src={item} alt="" />
                            </p>
                          }
                          title="页面预览"
                        >
                          <span style={{ color: 'blue' }}>文章</span>{' '}
                        </Popover>
                        &nbsp;评论&nbsp;
                        <Popover
                          content={<p>{item.content}</p>}
                          title="评论详情-原始内容"
                        >
                          <span style={{ color: 'blue' }}>查看内容&nbsp;</span>{' '}
                        </Popover>
                        <span>
                          {item.pass ? (
                            <span>
                              <Badge status="success" />
                              &nbsp;通过
                            </span>
                          ) : (
                            <span>
                              <Badge status="error" />
                              &nbsp;未通过
                            </span>
                          )}
                        </span>
                      </p>
                      <p
                        style={{
                          width: '150px',
                          display: 'flex',
                          justifyContent: 'space-between',
                          color: 'blue',
                        }}
                      >
                        <span
                          onClick={() => {
                            dispatch({
                              type:"work/showes",
                              payload:{
                                id:item.id,
                                pass:true
                              }
                            })
                            message.success('评论已通过')
                          }}
                        >
                          通过
                        </span>
                        <span
                          onClick={() => {
                            dispatch({
                              type:"work/showes",
                              payload:{
                                id:item.id,
                                pass:false
                              }
                            })
                            message.success('评论已拒绝')
                          }}
                        >
                          拒绝
                        </span>
                        <span onClick={()=>{
                          setIsModalOpen(true);
                          setitems(item)
                        }}>回复</span>
                        <Popconfirm
                          title="确认删除这个评论？"
                          onConfirm={()=>{
                            dispatch({
                              type:"work/delete",
                              payload:{id:item.id}
                            })
                          }}
                          onCancel={cancel}
                          okText="确认"
                          cancelText="取消"
                        >
                          <span>删除</span>
                        </Popconfirm>
                      </p>
                    </div>
                  );
                })}
                <Modal
                  footer={null}
                  title="回复评论111"
                  open={isModalOpen}
                  onOk={handleOk}
                  onCancel={handleCancel}
                >
                  <TextArea rows={4} onChange={(e:any)=>{setvalues(e.target.value)

                  }} />
                  <Button
                    style={{ marginLeft: '330px', marginRight: '10px' }}
                    onClick={() => {
                      setIsModalOpen(false);


                    }}
                  >
                    取消
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => {
                      setIsModalOpen(false);
                      dispatch({
                        type:"work/push",
                        payload:obj
                      })

                    }}
                  >
                    回复
                  </Button>
                </Modal>
              </div>
            </div>
          ) : (
            <div>
              {/* //访客盒子 */}
              {comm.map((item: any, index: number) => {
                return (
                  <div key={index} className="getcomm">
                    <p>
                      {item.name}&nbsp;在 &nbsp;
                      <Popover
                        content={
                          <p>
                            <img src={item} alt="" />
                          </p>
                        }
                        title="页面预览"
                      >
                        <span style={{ color: 'blue' }}>文章</span>{' '}
                      </Popover>
                      &nbsp;评论&nbsp;
                      <Popover
                        content={<p>{item.content}</p>}
                        title="评论详情-原始内容"
                      >
                        <span style={{ color: 'blue' }}>查看内容&nbsp;</span>{' '}
                      </Popover>
                      <span>
                        {item.pass ? (
                          <span>
                            <Badge status="success" />
                            &nbsp;通过
                          </span>
                        ) : (
                          <span>
                            <Badge status="error" />
                            &nbsp;未通过
                          </span>
                        )}
                      </span>
                    </p>
                    <p
                      style={{
                        width: '150px',
                        display: 'flex',
                        justifyContent: 'space-between',
                        color: 'blue',
                      }}
                    >
                      <span
                        onClick={() => {
                          message.warning('访客无权进行该操作');
                        }}
                      >
                        通过
                      </span>
                      <span
                        onClick={() => {
                          message.warning('访客无权进行该操作');
                        }}
                      >
                        拒绝
                      </span>
                      <span onClick={showModal}>回复</span>
                      <Popconfirm
                        title="确认删除这个评论？"
                        onConfirm={()=>{
                          message.warning('访客无权进行该操作');
                        }}
                        onCancel={cancel}
                        okText="确认"
                        cancelText="取消"
                      >
                        <span>删除</span>
                      </Popconfirm>
                    </p>
                  </div>
                );
              })}
              <Modal
                footer={null}
                title="回复评论"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
              >
                <TextArea rows={4} />
                <Button
                  style={{ marginLeft: '330px', marginRight: '10px' }}
                  onClick={() => {
                    setIsModalOpen(false);
                  }}
                >
                  取消
                </Button>
                <Button
                  type="primary"
                  onClick={() => {
                    setIsModalOpen(false);
                    openNotificationWithIcon('error');
                  }}
                >
                  回复
                </Button>
              </Modal>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default connect(({ work }: any) => work)(Index);
